<template>
	<view class="box">
		<view class="left">
			<slot name="left"></slot>
		</view>
		<view class="fw800 title">
			{{title}}
		</view>
		<view class="right">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script setup>
const $props = defineProps({
		title:{
			type:String,
			default:""
		}
	})
</script>

<style lang="scss" scoped>
.box{
	padding:0 3vw;
	height: 5vh;
	background-color: #f8f8f8;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.right,
	.left{
		width: 10vw;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.title{
		color:#2c2c2c;
	}
	.right{
		justify-content: flex-end;
	}
	.left{
		justify-content: flex-start;
	}
}
@media (prefers-color-scheme: dark) {
	.box{
		padding:0 3vw;
		height: 5vh;
		background-color: #2c2c2c;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.right,
		.left{
			width: 10vw;
			height: 100%;
			display: flex;
			align-items: center;
		}
		.title{
			color:#f8f8f8;
		}
		.right{
			justify-content: flex-end;
		}
		.left{
			justify-content: flex-start;
		}
	}
}
</style>